<template>
  <div class="profile-box">
    <div id="app" style="margin: 50px auto 0">
      <img src="./logo.png" ref="img" style="width: 200px" />
    </div>
    <VanForm style="margin-top: 20px" submit-on-enter>
      <VanCellGroup inset>
        <VanField
          v-model="u_phone"
          label="登录账号"
          placeholder="请输入您的电话号码"
          :rules="[
            { pattern, required: true, message: '请填写正确的电话号码' },
          ]"
        ></VanField>

        <VanField
          v-model="u_pwd"
          label="登录密码"
          type="password"
          placeholder="密码"
          :rules="[{ validator, required: true, message: '请填写正确的密码' }]"
        />
      </VanCellGroup>

      <div style="margin-top: 30px">
        <VanButton
          round
          block
          type="primary"
          @click="submit"
          native-type="submit"
          submit
          style="width: 300px; margin: 0 auto"
        >
          登录
        </VanButton>
      </div>
      <div style="width: 100%; text-align: center; margin-top: 50px">
        <span
          >没有账号？<a style="color: blueviolet" @click="router.push(`/zhuce`)"
            >点击这里注册</a
          ></span
        >
      </div>
    </VanForm>
    <!-- 滑块验证 -->
    <!-- <div class="wai">
      点击验证
      <div class="nei" ref="box"></div>
    </div> -->
    <!-- 滑块验证结束 -->
    <div style="height: 150px"></div>
  </div>
</template>

<script setup lang="ts">
import httpApi from "@/http";
import { showFailToast, showSuccessToast } from "vant";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const pattern = /^1[3-9]\d{9}$/;
const validator = (val: any) => /^[\w_-]{6,16}$/.test(val);

const store = useStore();
const router = useRouter();

let u_phone = ref();
let u_pwd = ref();

const submit = function () {
  let params = { u_phone: u_phone.value, u_pwd: u_pwd.value };
  httpApi.UserApi.denglu(params).then((res) => {
    console.log("用户登录为", params, res);
    if (res.data.code == 200 && res.config.data != "") {
      showSuccessToast("登录成功");
      router.push(`/home/index`);
      store.commit("LoginIn", res.data.data[0].u_id);
      const permissions = res.data.data;
      sessionStorage.setItem("Login", JSON.stringify(permissions || "[]"));
      console.log(store.state.u_id);
    } else {
      showFailToast("登录失败,账号或者密码错误");
    }
  });
};
</script>

<style scoped type="text/css">
/*无限旋转动画*/

@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#app {
  width: 200px;
  animation: changDeg 5s linear 0.2s infinite;
  /* mix-blend-mode: multiply;正底叠底 */
}

.zc {
  margin-top: 30px;
}
.profile-box {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #0c3662 0%, #dee3eb 100%);
  display: flex;
  flex-direction: column;
}
.wai {
  width: 300px;
  height: 70px;
  border: 1px solid gray;
  margin: 10px auto;
  text-align: center;
}
.nei {
  height: 50px;
  width: 0%;
  background-color: skyblue;

  transition: 2s;
}
.wai:active > .nei {
  width: 100%;
  background-color: blue;
}
</style>
